<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI专利管理系统</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 图标库 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            50: '#f0f9ff',
                            100: '#e0f2fe',
                            200: '#bae6fd',
                            300: '#7dd3fc',
                            400: '#38bdf8',
                            500: '#0ea5e9',
                            600: '#0284c7',
                            700: '#0369a1',
                            800: '#075985',
                            900: '#0c4a6e',
                        }
                    }
                }
            }
        }
    </script>
    <style>
        body {
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #eef2f7 100%);
        }
        .gradient-bg {
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        }
        .card-hover:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
        }
        .process-item.active {
            background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
            color: white;
        }
        .process-item.completed {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
        }
    </style>
</head>
<body class="min-h-screen">
    <!-- 顶部导航 -->
    <nav class="bg-white shadow-sm border-b">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <h1 class="text-xl font-bold text-gray-900">AI专利工作台</h1>
                    </div>
                    <!-- <div class="hidden md:ml-6 md:flex md:space-x-8">
                        <a href="#" class="text-primary-600 border-b-2 border-primary-600 px-1 pt-1 pb-4 text-sm font-medium">工作台</a>
                        <a href="#" class="text-gray-500 hover:text-gray-700 px-1 pt-1 pb-4 text-sm font-medium">案件管理</a>
                        <a href="#" class="text-gray-500 hover:text-gray-700 px-1 pt-1 pb-4 text-sm font-medium">统计分析</a>
                    </div> -->
                </div>
                <div class="flex items-center space-x-4">
                    <button class="text-gray-500 hover:text-gray-700">
                        <i class="ri-notification-line text-xl"></i>
                    </button>
                    <div class="flex items-center space-x-2">
                        <!-- <img class="h-8 w-8 rounded-full" src="https://via.placeholder.com/32" alt="用户头像"> -->
                        <span class="text-sm font-medium text-gray-700">张工程师</span>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
        <!-- 快速操作区域 -->
        <div class="mb-4">
            <h4 class="text-xl font-bold text-gray-900 mb-4">快速开始</h4>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <!-- 交底书撰写 -->
                <div class="bg-white rounded-lg shadow-sm border card-hover transition-all duration-200 cursor-pointer" onclick="window.open('./jiaodishu/index2.html', '_blank')">
                    <div class="p-6">
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                                    <i class="ri-file-edit-line text-2xl text-blue-600"></i>
                                </div>
                            </div>
                            <div class="ml-4">
                                <h3 class="text-lg font-medium text-gray-900">交底书撰写</h3>
                                <p class="text-sm text-gray-500">AI辅助技术交底书撰写</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 交底书查新 -->
                <div class="bg-white rounded-lg shadow-sm border card-hover transition-all duration-200 cursor-pointer" onclick="window.open('./jiaodishu/chaxin_main.html', '_blank')">
                    <div class="p-6">
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                                    <i class="ri-search-line text-2xl text-green-600"></i>
                                </div>
                            </div>
                            <div class="ml-4">
                                <h3 class="text-lg font-medium text-gray-900">交底书查新</h3>
                                <p class="text-sm text-gray-500">智能查新对比分析</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 申请书撰写 -->
                <div class="bg-white rounded-lg shadow-sm border card-hover transition-all duration-200 cursor-pointer" onclick="window.open('./shenqingshu/index3.html', '_blank')">
                    <div class="p-6">
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                                    <i class="ri-file-text-line text-2xl text-purple-600"></i>
                                </div>
                            </div>
                            <div class="ml-4">
                                <h3 class="text-lg font-medium text-gray-900">申请书撰写</h3>
                                <p class="text-sm text-gray-500">专利申请书智能生成</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 专利预评估 -->
                <div class="bg-white rounded-lg shadow-sm border card-hover transition-all duration-200 cursor-pointer" onclick="window.open('./zhijian/index4.html', '_blank')">
                    <div class="p-6">
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center">
                                    <i class="ri-bar-chart-line text-2xl text-orange-600"></i>
                                </div>
                            </div>
                            <div class="ml-4">
                                <h3 class="text-lg font-medium text-gray-900">专利预评估</h3>
                                <p class="text-sm text-gray-500">申请前智能评估</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 案件管理区域 -->
        <div class="bg-white rounded-lg shadow-sm border">
            <!-- 案件管理头部 -->
            <div class="px-6 py-4 border-b border-gray-200">
                <div class="flex justify-between items-center">
                    <div class="flex items-center space-x-2">
                        <h3 class="text-lg font-medium text-gray-900">我的案件</h3>
                        <!-- 问号提示按钮 -->
                        <div class="relative group">
                            <button class="w-3 h-3 bg-gray-400 hover:bg-gray-500 text-white rounded-full flex items-center justify-center text-xs transition-colors">
                                <i class="ri-question-line"></i>
                            </button>
                            <!-- 提示框 -->
                            <div class="absolute left-1/2 transform -translate-x-1/2 bottom-full mb-2 px-3 py-2 bg-gray-800 text-white text-xs rounded-lg whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-10">
                                新建交底书和申请书将自动创建案件
                                <!-- 小箭头 -->
                                <div class="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-800"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mt-4 flex space-x-4">
                    <select class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500">
                        <option>全部状态</option>
                        <option>交底书撰写中</option>
                        <option>交底书查新中</option>
                        <option>申请书撰写中</option>
                        <option>专利预评估中</option>
                        <option>已完成</option>
                    </select>
                    <div class="relative flex-1">
                        <input type="text" placeholder="搜索案件..." class="w-full border border-gray-300 rounded-lg px-3 py-2 pl-10 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500">
                        <i class="ri-search-line absolute left-3 top-1.5 text-gray-400"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- 案件列表和详情区域 -->
        <div class="flex flex-col lg:flex-row relative">
            <!-- 左侧：案件列表 -->
            <div class="w-full lg:w-1/3">
                <div class="bg-white rounded-lg shadow-sm border h-full min-h-[300px] flex flex-col">
                    <!-- 案件列表 -->
                    <div class="divide-y divide-gray-200 flex-1">
                        <!-- 案件项目 1 -->
                        <div class="px-4 py-3 hover:bg-gray-50 cursor-pointer" onclick="selectCase('case1')">
                            <div class="flex items-center justify-between">
                                <div class="flex-1">
                                    <h4 class="text-sm font-medium text-gray-900">机器学习优化算法</h4>
                                    <p class="text-xs text-gray-500 mt-1">PAT-2024-003</p>
                                </div>
                                <div class="flex items-center space-x-2">
                                    <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center">
                                        <span class="text-xs font-medium text-gray-600">1/4</span>
                                    </div>
                                    <i class="ri-arrow-right-s-line text-gray-400"></i>
                                </div>
                            </div>
                        </div>

                        <!-- 案件项目 2 -->
                        <div class="px-4 py-3 hover:bg-gray-50 cursor-pointer" onclick="selectCase('case2')">
                            <div class="flex items-center justify-between">
                                <div class="flex-1">
                                    <h4 class="text-sm font-medium text-gray-900">区块链数据存储方法</h4>
                                    <p class="text-xs text-gray-500 mt-1">PAT-2024-002</p>
                                </div>
                                <div class="flex items-center space-x-2">
                                    <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center">
                                        <span class="text-xs font-medium text-gray-600">1/4</span>
                                    </div>
                                    <i class="ri-arrow-right-s-line text-gray-400"></i>
                                </div>
                            </div>
                        </div>

                        <!-- 案件项目 3 -->
                        <div class="px-4 py-3 hover:bg-gray-50 cursor-pointer" onclick="selectCase('case3')">
                            <div class="flex items-center justify-between">
                                <div class="flex-1">
                                    <h4 class="text-sm font-medium text-gray-900">生物医学图像识别算法</h4>
                                    <p class="text-xs text-gray-500 mt-1">PAT-2024-006</p>
                                </div>
                                <div class="flex items-center space-x-2">
                                    <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center">
                                        <span class="text-xs font-medium text-gray-600">3/4</span>
                                    </div>
                                    <i class="ri-arrow-right-s-line text-gray-400"></i>
                                </div>
                            </div>
                        </div>

                        <!-- 案件项目 4 -->
                        <div class="px-4 py-3 hover:bg-gray-50 cursor-pointer" onclick="selectCase('case4')">
                            <div class="flex items-center justify-between">
                                <div class="flex-1">
                                    <h4 class="text-sm font-medium text-gray-900">物联网智能传感器网络</h4>
                                    <p class="text-xs text-gray-500 mt-1">PAT-2024-004</p>
                                </div>
                                <div class="flex items-center space-x-2">
                                    <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center">
                                        <span class="text-xs font-medium text-gray-600">3/4</span>
                                    </div>
                                    <i class="ri-arrow-right-s-line text-gray-400"></i>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 案件项目 5 -->
                        <div class="px-4 py-3 hover:bg-gray-50 cursor-pointer" onclick="selectCase('case5')">
                            <div class="flex items-center justify-between">
                                <div class="flex-1">
                                    <h4 class="text-sm font-medium text-gray-900">智能语音识别系统</h4>
                                    <p class="text-xs text-gray-500 mt-1">PAT-2024-001</p>
                                </div>
                                <div class="flex items-center space-x-2">
                                    <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center">
                                        <span class="text-xs font-medium text-green-600">4/4</span>
                                    </div>
                                    <i class="ri-arrow-right-s-line text-gray-400"></i>
                                </div>
                            </div>
                        </div>
                    
                        <!-- 案件项目 6 -->
                        <!-- <div class="px-4 py-3 hover:bg-gray-50 cursor-pointer" onclick="selectCase('case6')">
                            <div class="flex items-center justify-between">
                                <div class="flex-1">
                                    <h4 class="text-sm font-medium text-gray-900">量子加密通信协议</h4>
                                    <p class="text-xs text-gray-500 mt-1">PAT-2024-005</p>
                                </div>
                                <div class="flex items-center space-x-2">
                                    <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center">
                                        <span class="text-xs font-medium text-gray-600">1/4</span>
                                    </div>
                                    <i class="ri-arrow-right-s-line text-gray-400"></i>
                                </div>
                            </div>
                        </div> -->
                    </div>
                </div>
            </div>

            <!-- 右侧：案件详情 -->
            <div class="w-full lg:w-2/3">
                <div class="bg-white rounded-lg shadow-sm border h-full min-h-[300px] flex flex-col" id="caseDetail">
                    <div class="px-6 py-4 border-b border-gray-200">
                        <h3 class="text-lg font-medium text-gray-900">案件详情</h3>
                    </div>
                    <div class="p-6">
                        <!-- 默认状态 -->
                        <div class="text-center text-gray-500 py-8">
                            <i class="ri-file-list-line text-4xl mb-4"></i>
                            <p>请选择一个案件查看详情</p>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
        
        <!-- 页码选择 - 移到右侧区域下方 -->
        <div class="mt-4 flex justify-begin">
            <div class="bg-opacity-0 rounded-lg shadow-sm  px-4 ">
                <div class="flex items-center space-x-4">
                    <nav class="flex items-center space-x-2">
                        <button class="px-3 py-2 text-sm text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-md disabled:opacity-50 disabled:cursor-not-allowed" 
                                id="prevBtn">
                            <i class="ri-arrow-left-s-line"></i>
                        </button>
                        
                        <div class="flex items-center space-x-1" id="pageNumbers">
                            <button class="px-3 py-2 text-sm bg-blue-600 text-white rounded-md" >1</button>
                            <button class="px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-md" >2</button>
                            <button class="px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-md" >3</button>
                        </div>
                        
                        <button class="px-3 py-2 text-sm text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-md disabled:opacity-50 disabled:cursor-not-allowed" 
                                id="nextBtn">
                            <i class="ri-arrow-right-s-line"></i>
                        </button>
                    </nav>
                    
                    <div class="flex items-center text-sm text-gray-500">
                        <span>共 <span id="totalCases">18</span> 个案件</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 案件数据
        const casesData = {
            case1: {
                name: '机器学习优化算法',
                number: 'PAT-2024-003',
                status: '交底书撰写中',
                createTime: '2024-01-25',
                description: '面向大规模数据的机器学习算法优化方法',
                progress: {
                    disclosure: { status: 'completed', file: './jiaodishu/editor2.html' },
                    novelty: { status: 'pending', file: './jiaodishu/chaxin.html' },
                    application: { status: 'pending', file: './shenqingshu/editor.html' },
                    evaluation: { status: 'pending', file: './zhijian/evaluate.html' }
                }
            },
            case2: {
                name: '区块链数据存储方法',
                number: 'PAT-2024-002',
                status: '交底书查新中',
                createTime: '2024-01-20',
                description: '基于区块链技术的分布式数据存储和验证方法',
                progress: {
                    disclosure: { status: 'completed', file: './jiaodishu/editor2.html' },
                    novelty: { status: 'in-progress', file: './jiaodishu/chaxin.html' },
                    application: { status: 'pending', file: './shenqingshu/editor.html' },
                    evaluation: { status: 'pending', file: './zhijian/evaluate.html' }
                }
            },
            case3: {
                name: '生物医学图像识别算法',
                number: 'PAT-2024-006',
                status: '查新已完成',
                createTime: '2024-02-10',
                description: '基于深度学习的医学影像智能诊断系统，支持多种疾病的自动识别和分析',
                progress: {
                    disclosure: { status: 'completed', file: './jiaodishu/editor2.html' },
                    novelty: { status: 'completed', file: './jiaodishu/compare1.html' },
                    application: { status: 'pending', file: './shenqingshu/editor.html' },
                    evaluation: { status: 'pending', file: './zhijian/evaluate.html' }
                }
            },
            case4: {
                name: '物联网智能传感器网络',
                number: 'PAT-2024-004',
                status: '专利评估中',
                createTime: '2024-02-01',
                description: '基于物联网技术的智能传感器网络系统，实现设备间的自主协调和数据融合',
                progress: {
                    disclosure: { status: 'completed', file: './jiaodishu/editor2.html' },
                    novelty: { status: 'completed', file: './jiaodishu/compare1.html' },
                    application: { status: 'completed', file: './shenqingshu/editor.html' },
                    evaluation: { status: 'in-progress', file: './zhijian/evaluate.html' }
                }
            },
            case5: {
                name: '智能语音识别系统',
                number: 'PAT-2024-001',
                status: '评估已完成',
                createTime: '2024-01-15',
                description: '基于深度学习的智能语音识别系统，支持多语言实时转换',
                progress: {
                    disclosure: { status: 'completed', file: './jiaodishu/editor2.html' },
                    novelty: { status: 'completed', file: './jiaodishu/compare1.html' },
                    application: { status: 'completed', file: './shenqingshu/editor.html' },
                    evaluation: { status: 'completed', file: './zhijian/evaluate.html' }
                }
            },
            case6: {
                name: '量子加密通信协议',
                number: 'PAT-2024-005',
                status: '交底书撰写中',
                createTime: '2024-02-05',
                description: '基于量子密钥分发的安全通信协议，提供理论上不可破解的加密方案',
                progress: {
                    disclosure: { status: 'completed', file: './jiaodishu/editor2.html' },
                    novelty: { status: 'pending', file: './jiaodishu/compare1.html' },
                    application: { status: 'pending', file: './shenqingshu/editor.html' },
                    evaluation: { status: 'pending', file: './zhijian/evaluate.html' }
                }
            }
        };

        function selectCase(caseId) {
            const caseData = casesData[caseId];
            if (!caseData) return;

            // 动态计算流程状态 - 当前一个任务完成后，下一个任务自动开始
            function getProcessStatus(progress) {
                const stages = ['disclosure', 'novelty', 'application', 'evaluation'];
                let processedProgress = { ...progress };
                
                for (let i = 0; i < stages.length; i++) {
                    const currentStage = stages[i];
                    const nextStage = stages[i + 1];
                    
                    // 如果当前阶段已完成且下一阶段是pending，则将下一阶段设为in-progress
                    if (processedProgress[currentStage].status === 'completed' && 
                        nextStage && 
                        processedProgress[nextStage].status === 'pending') {
                        processedProgress[nextStage] = {
                            ...processedProgress[nextStage],
                            status: 'in-progress'
                        };
                        break; // 只激活下一个阶段，不继续往后
                    }
                }
                
                return processedProgress;
            }
            
            const dynamicProgress = getProcessStatus(caseData.progress);

            const detailHtml = `
                <div class="px-6 py-4 border-b border-gray-200">
                    <div class="flex justify-between items-start mb-2">
                        <div>
                            <h3 class="text-lg font-medium text-gray-900">${caseData.name}</h3>
                            <p class="text-sm text-gray-500">${caseData.number}</p>
                        </div>
                        <div class="text-right">
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
                                caseData.status === '进行中' ? 'bg-blue-100 text-blue-800' :
                                caseData.status === '已完成' ? 'bg-green-100 text-green-800' :
                                caseData.status === '待处理' ? 'bg-yellow-100 text-yellow-800' :
                                'bg-gray-100 text-gray-800'
                            }">
                                ${caseData.status}
                            </span>
                        </div>
                    </div>
                    <div class="flex items-center text-sm text-gray-500">
                        <i class="ri-time-line mr-1"></i>
                        <span>创建时间：${caseData.createTime}</span>
                    </div>
                </div>
                <div class="p-6">
                    <div class="mb-6">
                        <h4 class="text-sm font-medium text-gray-900 mb-4">处理流程</h4>
                        <!-- 流程图布局 -->
                        <div class="relative">
                            <!-- 连接线 -->
                            <div class="absolute top-8 left-8 right-8 h-0.5 bg-gray-200 z-0"></div>
                            
                            <!-- 流程步骤 -->
                            <div class="relative z-10 grid grid-cols-2 lg:grid-cols-4 gap-4">
                                <!-- 交底书撰写 -->
                                <div class="flex flex-col items-center">
                                    <a href="${dynamicProgress.disclosure.file}" target="_blank" class="w-16 h-16 rounded-full flex items-center justify-center mb-3 ${
                                        dynamicProgress.disclosure.status === 'completed' ? 'bg-green-100 border-2 border-green-500' :
                                        dynamicProgress.disclosure.status === 'in-progress' ? 'bg-blue-100 border-2 border-blue-500' :
                                        'bg-gray-100 border-2 border-gray-300'
                                    }">
                                        <i class="ri-file-edit-line text-xl ${
                                            dynamicProgress.disclosure.status === 'completed' ? 'text-green-600' :
                                            dynamicProgress.disclosure.status === 'in-progress' ? 'text-blue-600' :
                                            'text-gray-400'
                                        }"></i>
                                    </a>
                                    <a href="${dynamicProgress.disclosure.file}" target="_blank" class="text-xs font-medium text-center mb-2">交底书撰写</a>
                                    ${
                                        dynamicProgress.disclosure.status === 'completed' ?
                                        `<a href="${dynamicProgress.disclosure.file}" target="_blank" class="text-xs text-primary-600 hover:text-primary-700 bg-primary-50 px-2 py-1 rounded">查看</a>` :
                                        `<span class="text-xs text-gray-400 bg-gray-50 px-2 py-1 rounded">未开始</span>`
                                    }
                                </div>
                                
                                <!-- 交底书查新 -->
                                <div class="flex flex-col items-center">
                                    <a href="${dynamicProgress.novelty.file}" target="_blank" class="w-16 h-16 rounded-full flex items-center justify-center mb-3 ${
                                        dynamicProgress.novelty.status === 'completed' ? 'bg-green-100 border-2 border-green-500' :
                                        dynamicProgress.novelty.status === 'in-progress' ? 'bg-blue-100 border-2 border-blue-500' :
                                        'bg-gray-100 border-2 border-gray-300'
                                    }">
                                        <i class="ri-search-line text-xl ${
                                            dynamicProgress.novelty.status === 'completed' ? 'text-green-600' :
                                            dynamicProgress.novelty.status === 'in-progress' ? 'text-blue-600' :
                                            'text-gray-400'
                                        }"></i>
                                    </a>
                                    <a href="${dynamicProgress.novelty.file}" target="_blank" class="text-xs font-medium text-center mb-2">交底书查新</a>
                                    ${
                                        dynamicProgress.novelty.status === 'completed' ?
                                        `<a href="${dynamicProgress.novelty.file}" target="_blank" class="text-xs text-primary-600 hover:text-primary-700 bg-primary-50 px-2 py-1 rounded">查看</a>` :
                                        dynamicProgress.novelty.status === 'in-progress' ?
                                        `<a href="${dynamicProgress.novelty.file}" target="_blank" class="text-xs text-primary-600 hover:text-primary-700 bg-primary-50 px-2 py-1 rounded">进行中</a>` :
                                        dynamicProgress.novelty.status === 'pending' && dynamicProgress.disclosure.status === 'completed' ?
                                        `<a href="${dynamicProgress.novelty.file}" target="_blank" class="text-xs text-primary-600 hover:text-primary-700 bg-primary-50 px-2 py-1 rounded">去查新</a>` :
                                        `<span class="text-xs text-gray-400 bg-gray-50 px-2 py-1 rounded">未开始</span>`
                                    }
                                </div>
                                
                                <!-- 申请书撰写 -->
                                <div class="flex flex-col items-center">
                                    <a href="${dynamicProgress.application.file}" target="_blank" class="w-16 h-16 rounded-full flex items-center justify-center mb-3 ${
                                        dynamicProgress.application.status === 'completed' ? 'bg-green-100 border-2 border-green-500' :
                                        dynamicProgress.application.status === 'in-progress' ? 'bg-blue-100 border-2 border-blue-500' :
                                        'bg-gray-100 border-2 border-gray-300'
                                    }">
                                        <i class="ri-file-text-line text-xl ${
                                            dynamicProgress.application.status === 'completed' ? 'text-green-600' :
                                            dynamicProgress.application.status === 'in-progress' ? 'text-blue-600' :
                                            'text-gray-400'
                                        }"></i>
                                    </a>
                                    <a href="${dynamicProgress.application.file}" target="_blank" class="text-xs font-medium text-center mb-2">申请书撰写</a>
                                    ${
                                        dynamicProgress.application.status === 'completed' ?
                                        `<a href="${dynamicProgress.application.file}" target="_blank" class="text-xs text-primary-600 hover:text-primary-700 bg-primary-50 px-2 py-1 rounded">查看</a>` :
                                        dynamicProgress.application.status === 'in-progress' ?
                                        `<a href="${dynamicProgress.application.file}" target="_blank" class="text-xs text-primary-600 hover:text-primary-700 bg-primary-50 px-2 py-1 rounded">去撰写</a>` :
                                        dynamicProgress.application.status === 'pending' && dynamicProgress.novelty.status === 'completed' ?
                                        `<a href="${dynamicProgress.application.file}" target="_blank" class="text-xs text-primary-600 hover:text-primary-700 bg-primary-50 px-2 py-1 rounded">去撰写</a>` :
                                        `<span class="text-xs text-gray-400 bg-gray-50 px-2 py-1 rounded">未开始</span>`
                                    }
                                </div>
                                
                                <!-- 专利预评估 -->
                                <div class="flex flex-col items-center">
                                    <a href="${dynamicProgress.evaluation.file}" target="_blank" class="w-16 h-16 rounded-full flex items-center justify-center mb-3 ${
                                        dynamicProgress.evaluation.status === 'completed' ? 'bg-green-100 border-2 border-green-500' :
                                        dynamicProgress.evaluation.status === 'in-progress' ? 'bg-blue-100 border-2 border-blue-500' :
                                        'bg-gray-100 border-2 border-gray-300'
                                    }">
                                        <i class="ri-bar-chart-line text-xl ${
                                            dynamicProgress.evaluation.status === 'completed' ? 'text-green-600' :
                                            dynamicProgress.evaluation.status === 'in-progress' ? 'text-blue-600' :
                                            'text-gray-400'
                                        }"></i>
                                    </a>
                                    <a href="${dynamicProgress.evaluation.file}" target="_blank" class="text-xs font-medium text-center mb-2">专利预评估</a>
                                    ${
                                        dynamicProgress.evaluation.status === 'completed' ?
                                        `<a href="${dynamicProgress.evaluation.file}" target="_blank" class="text-xs text-primary-600 hover:text-primary-700 bg-primary-50 px-2 py-1 rounded">查看</a>` :
                                        dynamicProgress.application.status === 'completed'?
                                        `<a href="${dynamicProgress.evaluation.file}" target="_blank" class="text-xs text-primary-600 hover:text-primary-700 bg-primary-50 px-2 py-1 rounded">去评估</a>` :
                                        `<span class="text-xs text-gray-400 bg-gray-50 px-2 py-1 rounded">未开始</span>`
                                    }
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            
            document.getElementById('caseDetail').innerHTML = detailHtml;
        }

        // 默认选择第一个案件
        document.addEventListener('DOMContentLoaded', function() {
            selectCase('case1');
        });
    </script>
</body>
</html>